<template>
  <div class="app-container org">
    <el-card class="leftCard">
      <!-- 搜索条件盒子 -->
      <div>
        <p class="pinformation">检测类别名称</p>
        <el-form label-width="auto" ref="queryRef" :model="queryParams">
          <el-row :gutter="10">
            <el-col :span="17">
              <el-form-item label="检测类别名称：" prop="jclbName">
                <el-input maxlength="40" clearable placeholder="请输入类别名称" v-model.trim="queryParams.jclbName"
                  @keyup.enter="handleQuery" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="17">
              <el-form-item label="类别组名称：" prop="jclbGroupName">
                <el-input maxlength="40" clearable placeholder="请输入类别组名称" v-model.trim="queryParams.jclbGroupName"
                  @keyup.enter="handleQuery" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-row justify="end">
                <el-button type="success" @click="handleQuery">搜索</el-button>
                <el-button class="business resetBtn" @click="resetQuery">重置</el-button>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 机构列表盒子 -->
      <div>
        <el-row>
          <p class="pinformation">检测类别列表</p>
          <p class="totalStyle">共 {{ total }} 条数据</p>
          <el-row style="padding-bottom: 5px; margin-left: 15px">
            <!-- <el-button
              link
              type="success"
              icon="Refresh"
              @click="handleSynchronous"
              :loading="loadingBtn"
              >同步检测类别</el-button
            > -->
          </el-row>
        </el-row>
        <el-table ref="mainTableRef" v-loading="loading" :show-overflow-tooltip="true" class="business" :data="jclbList"
          :row-class-name="tableRowClass" @row-click="rowClick">
          <el-table-column label="类别组" align="center" prop="jclbGroupName" show-overflow-tooltip />
          <el-table-column label="检测类别" align="center" prop="jclbName" show-overflow-tooltip />
          <el-table-column label="检测代码" align="center" prop="jclbCode" width="80" show-overflow-tooltip />
          <el-table-column label="排序号" align="center" prop="orderId" width="70" show-overflow-tooltip />
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize" @pagination="getList" />
      </div>
    </el-card>
    <el-card class="rightCard">
      <!-- 基础信息 -->
      <el-form label-width="100px" :model="form" ref="jclebRef">
        <div>
          <el-row style="margin-bottom: 5px;justify-content: space-between;">
            <p class="pinformation">基本信息</p>
            <el-button type="success" @click="handleSave">保存</el-button>
          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item label="类型：" prop="typeId">
                <span v-if="form.typeId">类别</span>
                <span v-else>类别组</span>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="form.typeId == 1">
              <el-form-item label="类别组：" prop="pJclbId">
                {{ form.jclbGroupName || "/" }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item label="类别名称：" prop="jclbName">{{
                form.jclbName || "/"
              }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="类别代码：" prop="jclbCode">
                <el-input clearable placeholder="请输入类别代码" v-model.trim="form.jclbCode" maxlength="100" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="排序号：" prop="orderId">
                <el-input clearable placeholder="请输入排序号" v-model.trim="form.orderId" maxlength="100" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="低于检出限原始记录表达：" label-width="170">
                <el-select style="width: 100%" placeholder="请选择" v-model="form.checkLimitTableId">
                  <el-option v-for="dict in sys_limit_item" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="低于检出限报告表达：" label-width="170">
                <el-select style="width: 100%" placeholder="请选择" v-model="form.checkLimitReportId">
                  <el-option v-for="dict in sys_limit_item" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="判断依据：">
            <el-input clearable type="textarea" placeholder :autosize="{ minRows: 3, maxRows: 7 }" v-model.trim="form.pdyj"
              maxlength="2000" show-word-limit />
              <span style="color:red">多个判断依据以"、"间隔。</span>
          </el-form-item>
        </div>
      </el-form>

      <div class="toggle-section" v-show="bottomDisable">
        <el-row>
          <p class="pinformation">属性列表</p>
          <p class="totalStyle">共 {{ propertyList.length }} 条数据</p>
          <el-row style="padding-bottom: 5px; margin-left: 15px">
            <!-- <el-button
              link
              type="success"
              icon="Refresh"
              @click="handleSynAttribute"
              :loading="loadingBtn1"
              >同步检测类别属性</el-button
            > -->
          </el-row>
        </el-row>

        <el-table ref="subTableRef" style="margin-top: 10px; width: 80%" :data="propertyList" border>
          <el-table-column label="序号" type="index" align="center" width="100px" />
          <el-table-column label="属性名称" align="center" prop="propertyName"></el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script setup name="Jclb">
import {
  listJclb,
  getJclb,
  saveJclbCode,
} from "@/api/store/jclb";
const { proxy } = getCurrentInstance();
const { sys_limit_item } =
  proxy.useShareDict(
    "sys_limit_item"
  );
const jclbList = ref([]);
const loading = ref(false);
const disable = ref(false);
const bottomDisable = ref(true);
// const loadingBtn = ref(false);
// const loadingBtn1 = ref(false);
const total = ref(0);
const typeList = ref([]);
const propertyList = ref([]);

typeList.value = [
  {
    typeId: 0,
    label: "类别组",
  },
  {
    typeId: 1,
    label: "类别",
  },
];
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
});

const { queryParams, form } = toRefs(data);

/** 查询检测类别库列表 */
function getList() {
  loading.value = true;
  listJclb(queryParams.value).then((response) => {
    jclbList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

function resetQuery() {
  queryParams.value.pageNum = 1;
  proxy.resetForm("queryRef");
  getList();
}

const heightBright = ref("");

function rowClick(row) {
  form.value = {};
  disable.value = true;
  proxy.$refs["jclebRef"].clearValidate();
  getJclb(row.jclbId).then((response) => {
    propertyList.value = response.data.propertyList || [];
    form.value = response.data;
    bottomDisable.value = form.value.typeId;
    heightBright.value = row.jclbId;
    tableRowClass({ row });
  });
}

function tableRowClass({ row }) {
  if (row) {
    if (row.jclbId == heightBright.value) {
      return "current-row";
    }
    return "";
  }
}

function handleSave() {
  if (!(/^[0-9]+$/.test(form.value.orderId))) {
    proxy.$modal.msgError("请输入正确的排序号")
    return
  }
  saveJclbCode(form.value).then(res => {
    handleQuery()
    proxy.$modal.msgSuccess("保存成功")
  })
}

getList();

watch(
  () => total.value,
  () => {
    if (total.value) {
      heightParams.value = [
        { tableName: "main", bottomHeight: 74 },
        { tableName: "sub", bottomHeight: 50 },
      ];
    } else {
      heightParams.value = [
        { tableName: "main", bottomHeight: 21 },
        { tableName: "sub", bottomHeight: 50 },
      ];
    }
    getTableHeight();
  }
);

const heightParams = ref([
  { tableName: "main", bottomHeight: 74 },
  { tableName: "sub", bottomHeight: 50 },
]);

function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}

onMounted(() => {
  nextTick(function () {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  })
})

onUpdated(() => {
  nextTick(function () {
    getTableHeight();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});
</script>

<style scoped></style>
